<template>
  <l-content :app="app" width="1400px">
    <el-card>
      <el-form :inline="true" size="mini" :model="searchForm" class="demo-form-inline"
               onkeydown="if(event.keyCode==13){return false;}" @keyup.native.enter="onSearch">
        <el-form-item class="pull-right">
          <el-input
            placeholder="账号"
            v-model="searchForm.param">
            <div slot="suffix" class="el-input__icon">
              <el-button size="mini" type="text" @click="onSearch">
                <i class="el-icon-search"></i>
              </el-button>
            </div>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="plus" @click="onAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <c-pop-button type="danger" pMsg="确认要批量删除吗？" :disabled="!canDeleteBatch" @click="onDeleteBatch"><i
            class="el-icon-delete"></i>&nbsp;批量删除
          </c-pop-button>
        </el-form-item>
      </el-form>
      <!--
        table 根据这个来获取子组件的方法
        tableData 表格数据
        handleSelectionChange 监听选择
        handleCurrentChange 监听翻页事件
        loading 表格加载,！注意，loading的用法和原生的有区别
      -->
      <c-page-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @sort-change="handleSortChange"
        @current-change="handleCurrentChange"
        :loading="loading">
        <el-table-column
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          prop="payTypeStr"
          label="支付方式"
          sortable='custom'
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="payItemStr"
          label="支付科目"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="accountPwd"
          label="支付密码"
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="accountTypeStr"
          label="支付账号类型"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          sortable='custom'
          min-width="80">
          <template slot-scope="scope">{{ scope.row.status=='1'?'有效':'无效'}}</template>
        </el-table-column>
        <el-table-column
          prop="pay_item_id"
          label="支付时是否显示"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              @click="handleDetail(scope.row)">详情
            </el-button>
            <!-- 必须使用箭头函数把btn的值传下去才能控制开关的加载状态 -->
            <c-pop-button
              size="mini"
              type="danger"
              pMsg="确认要删除吗？"
              @click="btn => handleDelete(btn, scope.row)"
            >删除
            </c-pop-button>

          </template>
        </el-table-column>
      </c-page-table>
    </el-card>
    <component :is="dialog" :data="dialogData" @ok="handleCurrentChange(tableData.page)"
               @close="dialog = ''"/>

  </l-content>
</template>

<script>
import SDialogEdit from './comps/AirB2bPayAccountManager/SDialogEdit'
// 用于查询的参数
const paramForm = {}
export default {
  name: 'AirB2bPayAccountManager',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogEdit
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      searchForm: {
        param: ''
      },
      dialog: '',
      dialogData: {
        detail: {}
      },
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.handleCurrentChange(1)
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  watch: {
    // 通过监听选择项来判断批量删除按钮是否可用
    multipleSelection (val) {
      this.canDeleteBatch = val.length > 0
    }
  },
  methods: {
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(paramForm, this.searchForm)
      this.handleCurrentChange(1)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      paramForm.sidx = sidx
      paramForm.sord = sord
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.loading = true
      return new Promise((resolve, reject) => {
        // this.pageSize 获取当前每页显示数量,
        this.$service.airB2bPayAccount.queryAirB2bPayAccountPage(currentPage, this.pageSize, paramForm).then(res => {
          this.tableData = res.data
          resolve()
        }).catch(reject).finally(() => {
          this.loading = false
        })
      })
    },
    handleEdit (row) {
      this.$service.airB2bPayAccount.detailAirB2bPayAccount({id: row.id}).then(response => {
        this.dialogData.title = '编辑支付账号'
        this.dialogData.showsave = true
        this.dialogData.detail = response.data.airB2bPayAccountInfo
        this.dialog = 'SDialogEdit'
      })
    },
    handleDetail (row) {
      this.$service.airB2bPayAccount.detailAirB2bPayAccount({id: row.id}).then(response => {
        this.dialogData.title = '支付账号详情'
        this.dialogData.showsave = false
        this.dialogData.detail = response.data.airB2bPayAccountInfo
        this.dialog = 'SDialogEdit'
      })
    },
    handleDelete (btn, row) {
      this.$service.airB2bPayAccount.deleteAirB2bPayAccount(row.id).then(() => {
        this.handleCurrentChange(this.tableData.page)
      }).finally(() => {
        btn.isLoading(false)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onAdd () {
      this.dialogData.title = '新增支付账号'
      this.dialogData.showsave = true
      this.dialogData.detail = []
      this.dialog = 'SDialogEdit'
    },
    onDeleteBatch (btn) {
      if (this.multipleSelection.length > 0) {
        const ids = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id)
        }
        this.$service.airB2bPayAccount.batchDelete(ids).then(() => {
          this.handleCurrentChange(this.tableData.page)
        }).finally(() => {
          btn.isLoading(false)
        })
      } else {
        this.$message({
          message: '没有选中项',
          type: 'warning'
        })
        btn.isLoading(false)
      }
    }
  }
}
</script>

<style scoped>

</style>
